<template>
  <div style="margin: auto"><h1>用户管理</h1></div>

  <el-table
      :data="cutObj.records"
      height="250"
      border
      style="width: 100%">
    <el-table-column
        prop="userName"
        label="同户名"
        width="300px">
    </el-table-column>
    <el-table-column
        prop="pwd"
        label="密码"
        width="200px">
    </el-table-column>
    <el-table-column
        prop="name"
        label="真实姓名"
        width="300px">
    </el-table-column>
    <el-table-column
        label="操作"
        width="200px">
      <template #default="scope">
        <el-button type="primary" size="small" @click="del(scope.row.id)">删除用户</el-button>
        <el-button type="primary" size="small" @click="findById(scope.row.id);this.userId=scope.row.id">修改权限</el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-pagination
      v-model:currentpage="cutObj.current"
      v-model:page-size="cutObj.size"
      background
      layout="prev, pager, next,jumper"
      :total="cutObj.total"
      @current-change="findByItem">
  </el-pagination>

  <el-button type="primary" @click="this.addVisible=true" style="margin-top: 60px;margin-left: 50px;size: 20px">添加用户</el-button>

  <div class="searchDiv">
    <el-row>
      <el-col :span="10">用户名称<input type="text" v-model="findObj.name"></el-col>
    </el-row>
    <el-row>
      <el-col :span="8" style="margin-top: 20px"><el-button type="primary" @click="findByItem(1)">搜索</el-button></el-col>
    </el-row>
  </div>

  <el-dialog
      v-model= "updateVisible"
      title=""
      width="60%"
      center>
    <h1 style="margin-left: 210px">修改用户权限</h1>
    <div style="margin-left: 200px;margin-top: 50px">用户名:<span style="margin-left: 50px">{{this.user.userName}}</span>
    真实姓名:<span style="margin-left: 50px">{{this.user.name}}</span></div>
    <el-form-item label="拥有角色" prop="phone">
      <el-checkbox-group
          v-model="roles"
          @change="show"
      >
        <el-checkbox v-for="role in this.roleAll" :key="role.id" :label="role.id">
          {{
            role.name
          }}
        </el-checkbox>
      </el-checkbox-group>
    </el-form-item>

    <el-form-item label="拥有权限" prop="gradeShow">
      <el-tag
          style="margin: 2px 2px"
          v-for="grade in power"
          size="small">{{ grade.name }}
      </el-tag>
    </el-form-item>
    <el-button type="primary" @click="update" style="margin-top: 30px;margin-left: 50px;size: 20px" >修改</el-button>
  </el-dialog>

  <el-dialog
      v-model= "updateDiv"
      title=""
      width="20%"
      center>
    <h3>修改成功</h3>
    <el-button type="primary" @click="this.updateDiv=false;this.updateVisible=false;" style="margin-top: 30px;margin-left: 100px;size: 20px" >确定</el-button>
  </el-dialog>

<!--  添加-->

  <el-dialog
      v-model= "addVisible"
      title=""
      width="60%"
      center>
    <h1 style="margin-left: 210px">添加用户</h1>
    <div style="margin-left: 200px;margin-top: 50px">用户名:<input type="text" v-model="addUser.userName"><br>
      真实姓名:<input type="text" v-model="addUser.name"></div>
    <el-form-item label="拥有角色" prop="phone">
      <el-checkbox-group
          v-model="roles"
          @change="show"
      >
        <el-checkbox v-for="role in this.roleAll" :key="role.id" :label="role.id">
          {{
            role.name
          }}
        </el-checkbox>
      </el-checkbox-group>
    </el-form-item>

    <el-form-item label="拥有权限" prop="gradeShow">
      <el-tag
          style="margin: 2px 2px"
          v-for="grade in power"
          size="small">{{ grade.name }}
      </el-tag>
    </el-form-item>
    <el-button type="primary" @click="add" style="margin-top: 30px;margin-left: 50px;size: 20px" >添加</el-button>
  </el-dialog>

  <el-dialog
      v-model= "addDiv"
      title=""
      width="30%"
      center>
    <h3>{{ this.adds }}</h3>
    <el-button type="primary" @click="this.addDiv=false;this.addVisible=false;" style="margin-top: 30px;margin-left: 100px;size: 20px" >确定</el-button>
  </el-dialog>
  <el-dialog
      v-model= "addDivs"
      title=""
      width="30%"
      center>
    <h3>{{ this.adds }}</h3>
    <el-button type="primary" @click="this.addDivs=false" style="margin-top: 30px;margin-left: 100px;size: 20px" >确定</el-button>
  </el-dialog>
<!--  删除提示-->
  <el-dialog
      v-model= "delDiv"
      title=""
      width="30%"
      center>
    <h3>{{ this.dels }}</h3>
    <el-button type="primary" @click="this.delDiv=false" style="margin-top: 30px;margin-left: 100px;size: 20px" >确定</el-button>
  </el-dialog>
</template>

<script>
import axios from "axios";
const qs = require('qs');
export default {
  data(){
    return{
      cutObj:[],
      findObj:{},
      updateVisible:false,
      addVisible:false,
      updateDiv:false,
      roleId:[],
      user:{},
      roles:[],
      power:[],
      roleAll:[],
      userId:0,
      addUser:{},
      addDiv:false,
      adds:"",
      dels:"",
      addDivs:false,
      delDiv:false,
    }
  },
  methods:{
    findByItem(pageNo){
      this.findObj.pageNo = pageNo;
      axios.get("/project/user/findByItem",{params:this.findObj}).then(resp=>{
        this.cutObj = resp.data;
      })

    },
    del(id){
      axios.get("/project/user/del",{params:{
        id
        }}).then(resp=>{
          if (resp.data=="ok"){
            this.delDiv=true;
            this.dels="删除成功"
            this.findByItem(1);
          }else{
            this.delDiv=true;
            this.dels="不能删除登陆用户"
          }
      })
    },
    findById(id){
      this.roles=[];
      this.updateVisible=true;
      axios.get("/project/user/findById",{params:{
        id
        }}).then(resp=>{
        this.user=resp.data;
        this.user.roleList.forEach(n=>{
            this.roles.push(n.id)
        })
        this.power=resp.data.powerList;
      })
    },
    update(){
      axios.get("/project/user/update",{params:{
          userId:this.userId,
          roleId:this.roles
        },
        paramsSerializer: function (params) {
          return qs.stringify(params, {arrayFormat: 'repeat'})
        }
      }).then(resp=>{
        if (resp.data=="ok"){
          this.findByItem(1);
          this.updateDiv=true;
        }
      })
    },
    findRole(){
      axios.get("/project/role/findAll").then(resp=>{
        this.roleAll=resp.data;
      })
    },

    show() {
      if (this.roles.length === 0) {
        this.power = [];
        return
      }
      axios.get("/project/power/findByRole", {
        params: {
          roleId: this.roles,
        },
        paramsSerializer: function (params) {
          return qs.stringify(params, {arrayFormat: 'repeat'})
        }
      }).then(resp => {
        this.power = resp.data;
      });
    },
    add(){
      axios.get("/project/user/add",{params:{
          userName:this.addUser.userName,
          name:this.addUser.name,
          roleId: this.roles,
        },
        paramsSerializer: function (params) {
          return qs.stringify(params, {arrayFormat: 'repeat'})
        }
      }).then(resp=>{
        if (resp.data=="ok"){
          this.adds="添加成功"
          this.addDiv=true;
          this.addUser={};
          this.findByItem(1);
        }else {
          this.addDivs=true;
          this.adds="添加失败，该用户名已存在"
        }
      })
    },
  },
  created() {
    this.findByItem(1);
    this.findRole();
  }
}
</script>

<style scoped>
.searchDiv{
  display: flex;
  flex-wrap: wrap;
  width: 200px;
  margin-left: 700px;
  margin-top: 40px;
}

</style>